<template>
  <div>
    <!-- 标题 -->
    <div class="box-header flex items-center justify-between">
      <h1>
        <i class="el-icon-data-analysis title-logo" />
        {{ $t('menu.M_10400410') }}
      </h1>
    </div>
    <hr class="mb-3" />
    <!-- body -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
    >
      <el-form class="search-box" inline size="small" :model="dataForm">
        <el-form-item>
          <el-input
            maxlength="32"
            v-model="dataForm.name"
            @blur="() => (dataForm.name = dataForm.name.trim())"
            :placeholder="$t('developer.name')"
            size="small"
            style="width: 250px"
            clearable
            @clear="getDataList((pageNo = 1))"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('developer.assist_status')"
          >
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getDataList((pageNo = 1))"
            class="p-1.5"
            size="small"
          >
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-button
            style="border: none"
            type="primary"
            class="p-2"
            size="medium"
          >
            <table-column-filter
              :list="settingList"
              :default-setting="defaultSettings"
              v-model:settings="settings"
              domain="developer.list"
            />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="dataListLoading">
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          :label="$t('developer.name')"
        >
          <template v-slot="scope">
            <div @click="handleDetail(scope.row)">
              <label
                v-if="scope.row.developerType === 1"
                type="text"
                class="cursor-pointer"
                >{{ scope.row.contactName }}</label
              >
              <label
                v-if="scope.row.developerType === 2"
                type="text"
                class="cursor-pointer"
                >{{ scope.row.firstName }}</label
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="developerType"
          header-align="center"
          align="center"
          :label="$t('developer.developerType')"
        >
          <template v-slot="scope">
            <el-tag
              type="text"
              size="small"
              v-if="scope.row.developerType === 1"
            >
              {{ $t('developer.developer_type_list.personal') }}
            </el-tag>
            <el-tag
              type="text"
              size="small"
              v-if="scope.row.developerType === 2"
            >
              {{ $t('developer.developer_type_list.company') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('pidType')"
          prop="pidType"
          header-align="center"
          align="center"
          :label="$t('developer.pidType')"
        >
          <template v-slot="scope">
            <el-tag
              type="text"
              size="small"
              v-if="scope.row.developerType === 1 && scope.row.pidType"
            >
              {{
                scope.row.pidType === 1
                  ? $t('developer.id_card')
                  : scope.row.pidType === 2
                  ? $t('developer.passport')
                  : $t('developer.unknown')
              }}
            </el-tag>
            <el-tag
              type="text"
              size="small"
              v-if="scope.row.developerType === 2 && scope.row.pidType"
            >
              {{ $t('developer.business_license') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('pidNo')"
          prop="pidNo"
          header-align="center"
          align="center"
          :label="$t('developer.pidNo')"
        >
        </el-table-column>
        <el-table-column
          v-if="showHeader('email')"
          prop="email"
          key="email"
          header-align="center"
          align="center"
          :label="$t('developer.email')"
        >
        </el-table-column>
        <el-table-column
          prop="requestTime"
          header-align="center"
          align="center"
          min-width="100"
          :label="$t('developer.assist_apply_time')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.requestTime)">
              {{ dateFilter(scope.row.requestTime) }}
              {{ scope.row.requestTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showHeader('remark')"
          prop="remark"
          header-align="center"
          align="center"
          min-width="100"
          :label="$t('contact.remark')"
        />
        <el-table-column
          prop="checkAssistStatus"
          header-align="center"
          align="center"
          min-width="100"
          :label="$t('developer.assist_status')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.checkAssistStatus === 0" size="small">
              {{ $t('developer.assist_status_type.pending') }}
            </el-tag>
            <el-tag
              v-if="scope.row.checkAssistStatus === 1"
              size="small"
              type="success"
            >
              {{ $t('developer.assist_status_type.processed') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="assistResult"
          header-align="center"
          align="center"
          min-width="100"
          :label="$t('developer.assist_result')"
        >
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.assistResult === 0"
              size="small"
              type="info"
            >
              {{ $t('developer.assist_result_type.unable_to_process') }}
            </el-tag>
            <el-tag
              v-if="scope.row.assistResult === 1"
              size="small"
              type="success"
            >
              {{ $t('developer.assist_result_type.approved') }}
            </el-tag>
            <el-tag
              v-if="scope.row.assistResult === 2"
              size="small"
              type="danger"
            >
              {{ $t('developer.assist_result_type.reject') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="95px">
          <template v-slot="scope">
            <el-dropdown
              @command="
                (command) => {
                  handleDevCommand(command, scope.row)
                }
              "
            >
              <span class="el-dropdown-link">
                <svg-icon icon-class="menu" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="info">
                    <span class="text-center">
                      {{ $t('developer.operate_detail') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="
                      isAuth('10400410.MANAGE') &&
                      scope.row.checkAssistStatus === 0
                    "
                    command="assist"
                  >
                    <span class="text-center">
                      {{ $t('developer.assist') }}
                    </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.checkAssistStatus === 1"
                    command="assistDetail"
                  >
                    <span class="text-center">
                      {{ $t('developer.assist_detail') }}
                    </span>
                  </el-dropdown-item>
                </el-dropdown-menu></template
              >
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :visible="assistVisible"
      :title="$t('developer.assist')"
      width="800px"
      @close="cancel"
    >
      <el-form
        ref="editForm"
        :rules="rules"
        size="small"
        :model="form"
        label-width="150px"
      >
        <el-form-item :label="$t('developer.name')" prop="name">
          <el-input v-model="form.name" disabled show-word-limit clearable />
        </el-form-item>
        <el-form-item
          :label="$t('developer.assist_result')"
          prop="assistResult"
        >
          <el-radio-group v-model="form.assistResult">
            <el-radio :label="1">{{
              $t('developer.assist_result_type.approved')
            }}</el-radio>
            <el-radio :label="2">{{
              $t('developer.assist_result_type.reject')
            }}</el-radio>
            <el-radio :label="0">{{
              $t('developer.assist_result_type.unable_to_process')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('developer.assist_result_explain')"
          prop="assistResultExplain"
        >
          <el-input
            v-model="form.assistResultExplain"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            maxlength="256"
            show-word-limit
            clearable
            @blur="
              () => (form.assistResultExplain = form.assistResultExplain.trim())
            "
          />
        </el-form-item> </el-form
      ><template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="cancel">{{
            $t('common.cancel')
          }}</el-button>
          <el-button
            type="primary"
            size="small"
            :loading="isDisabled"
            @click="submit()"
            >{{ $t('common.confirm') }}</el-button
          >
        </span></template
      >
    </el-dialog>
    <el-dialog
      :visible="assistDetailVisible"
      :title="$t('developer.assist_detail')"
      width="800px"
      @close="cancelShowAssistDetail"
    >
      <el-form ref="detailForm" size="small" :model="form" label-width="150px">
        <el-form-item :label="$t('developer.name') + ':'" prop="name">
          <div v-html="form.name"></div>
        </el-form-item>
        <el-form-item
          :label="$t('developer.assist_result') + ':'"
          prop="assistResult"
        >
          <el-tag type="success" size="small" v-if="form.assistResult === 1">{{
            $t('developer.assist_result_type.approved')
          }}</el-tag>
          <el-tag type="danger" size="small" v-if="form.assistResult === 2">{{
            $t('developer.assist_result_type.reject')
          }}</el-tag>
          <el-tag type="info" size="small" v-if="form.assistResult === 0">{{
            $t('developer.assist_result_type.unable_to_process')
          }}</el-tag>
        </el-form-item>
        <el-form-item
          :label="$t('developer.assist_result_explain') + ':'"
          prop="assistResultExplain"
        >
          <div
            style="word-break: break-word"
            v-html="form.assistResultExplain"
          ></div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TableColumnFilter from '@/components/page-setting/table-column-filter'
import { timeFilter, dateFilter } from '@/filters/index'
import { formatDate } from '@/utils/formatDate'
import {
  developerCheckAssistList,
  saveCheckAssistResult
} from '@/api/developer'
import { isAuth } from '@/utils'

export default {
  components: {
    TableColumnFilter
  },
  data() {
    return {
      settings: {
        conditions: [],
        columns: []
      },
      form: {
        name: '',
        assistResult: 1,
        assistResultExplain: '',
        developerId: '',
        checkAssistId: ''
      },
      dataForm: {
        name: '',
        status: null
      },
      assistVisible: false,
      assistDetailVisible: false,
      isDisabled: false,
      cardBindBankId: 0,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
      rules: {}
    }
  },
  mounted() {
    this.getDataList()
  },
  computed: {
    statusArray() {
      return [
        { label: this.$t('developer.assist_status_type.pending'), value: 0 },
        { label: this.$t('developer.assist_status_type.processed'), value: 1 }
      ]
    },
    settingList() {
      return {
        columns: [
          {
            title: this.$t('developer.email'),
            code: 'email'
          },
          {
            title: this.$t('developer.pidType'),
            code: 'pidType'
          },
          {
            title: this.$t('developer.pidNo'),
            code: 'pidNo'
          },
          {
            title: this.$t('contact.remark'),
            code: 'remark'
          }
        ]
      }
    },
    defaultSettings() {
      return {
        columns: [
          'email',
          'remark'
          // this.$t('common.online'),
        ]
      }
    }
  },
  methods: {
    timeFilter,
    dateFilter,
    cancel() {
      this.$refs['editForm'].resetFields()
      this.assistVisible = false
    },
    cancelShowAssistDetail() {
      this.$refs['detailForm'].resetFields()
      this.assistDetailVisible = false
    },
    submit() {
      this.$refs['editForm'].validate((valid) => {
        this.isDisabled = true
        if (valid) {
          saveCheckAssistResult(this.form)
            .then((data) => {
              if (data) {
                this.getDataList()
                this.assistVisible = false
                this.isDisabled = false
                this.form = {
                  name: '',
                  assistResult: 1,
                  assistResultExplain: '',
                  developerId: '',
                  checkAssistId: ''
                }
                this.$message.success(this.$t('common.operate_success'))
              }
            })
            .catch((e) => {
              this.isDisabled = false
            })
        }
      })
    },
    handleDevCommand(command, data) {
      if (command === 'info') {
        this.handleDetail(data)
      } else if (command === 'assist') {
        this.form.developerId = data.developerId
        this.form.checkAssistId = data.checkAssistId
        if (data.developerType === 1) {
          this.form.name = data.contactName
        } else {
          this.form.name = data.firstName
        }
        this.assistVisible = true
      } else if (command === 'assistDetail') {
        this.form.developerId = data.developerId
        this.form.checkAssistId = data.checkAssistId
        if (data.developerType === 1) {
          this.form.name = data.contactName
        } else {
          this.form.name = data.firstName
        }
        this.assistDetailVisible = true
        this.form.assistResult = data.assistResult
        this.form.assistResultExplain = data.assistResultExplain
      }
    },
    handleDetail(data) {
      localStorage.setItem('developer-info', JSON.stringify(data))
      this.$router.push({
        path: `/developer/developer-detail/${data.developerId}`
      })
    },
    showHeader(label) {
      var list = this.settings['columns']
      return list ? list.includes(label) : false
    },
    showFormItem(label) {
      var list = this.settings['conditions']
      return list ? list.includes(label) : false
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.dataForm.status,
        developerName: this.dataForm.name
      }
      developerCheckAssistList(params)
        .then((data) => {
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          // this.$message.error(e.message)
          this.dataListLoading = false
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt)
    },
    isAuth
  }
}
</script>
<style lang="scss" scoped></style>
